<script lang="ts" setup>
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { createStaff, editStaff } from '@/api-new/institutional-personnel';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { roles } from '@/api-new/rabc';

  const props = defineProps({
    instId: String,
  });

  const roleSelect = useSelectOption({
    apiFun: roles,
    name: '人员角色',
    fieldNames: {
      label: 'roleName',
      value: 'roleId',
    },
  });

  const form = useForm({
    state: {
      staffName: '',
      phoneNo: '',
      instId: '',
      roleId: undefined,
      password: '',
    },
    rules: {
      staffName: {
        required: true,
        message: '请输入人员姓名',
      },
      phoneNo: {
        required: true,
        message: '请输入手机号码',
      },
      roleId: {
        required: true,
        message: '请选择人员角色',
      },
    },
  });

  const modal = useModeModalBinder({
    modes: ['add', 'edit'] as const,
    renderTitle(mode) {
      if (mode === 'add') {
        return '新增人员';
      }
      return '编辑人员';
    },
    onShow(mode, otherParams) {
      if (mode === 'add') {
        form.backToInit();
        form.state.instId = props.instId!;
      } else {
        form.setFieldsValue(otherParams);
        form.state.roleId = otherParams.role;
      }
    },
    async onOkClick(mode) {
      await form.validate();
      const data = form.state;

      if (mode === 'add') {
        return createStaff(data);
      }
      return editStaff(data);
    },
  });

  defineExpose(modal.expose);
</script>

<template>
  <a-modal width="800px" v-bind="modal.bindProps">
    <a-form v-bind="form.bindProps" layout="vertical">
      <!-- 长者信息 -->
      <a-card class="mb-4">
        <template #title>
          <div class="flex items-center">
            <icon-user class="mr-2" />
            <span>人员信息</span>
          </div>
        </template>
        <div class="grid grid-cols-2 gap-4">
          <a-form-item field="staffName" label="人员姓名" required>
            <a-input
              v-model="form.state.staffName"
              placeholder="请输入人员姓名"
            />
          </a-form-item>
          <a-form-item field="phoneNo" label="手机号码" required>
            <a-input
              v-model="form.state.phoneNo"
              placeholder="请输入手机号码"
            />
          </a-form-item>
        </div>
      </a-card>

      <!-- 评级信息 -->
      <a-card class="mb-4">
        <template #title>
          <div class="flex items-center">
            <icon-star class="mr-2" />
            <span>角色权限信息</span>
          </div>
        </template>
        <div class="grid grid-cols-2 gap-4">
          <a-form-item field="roleId" label="人员角色" required>
            <a-select
              v-model="form.state.roleId"
              v-bind="roleSelect.bindProps"
            />
          </a-form-item>
        </div>
      </a-card>
    </a-form>
  </a-modal>
</template>

<style scoped>
  .mb-4 {
    margin-bottom: 1rem;
  }
</style>
